<!--
@Description 基金项目管理 - 基础设置 - 元数据维护
@author wdd
@date 2023/10/31
-->
<template>
  <div class="content">
    <div class="set-box">
      <el-table row-key="id" :header-cell-style="{ background: '#eef1f6' }"
                ref="tableRef" :data="metaTableData"
                class="table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="isRow"  width="50" align="center"></el-table-column>
        <el-table-column prop="fieldName" align="center" label="元数据名称"></el-table-column>
        <el-table-column prop="field" width="220" align="center" label="英文字段"></el-table-column>
      </el-table>
      <div>
        <el-button type="primary" size="default" @click="sureSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref,nextTick,  inject,reactive} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const constant = inject('constant')
const tableRef = ref()
const dates = reactive({
  "success": true,
  "code": "200",
  "message": "操作成功",
  "data": [
    {
      "id": "1764553423457812482",
      "field": "number",
      "fieldName": "单据编号",
      "fieldType": 1,
      "sort": 1
    },
    {
      "id": "1764554505948954626",
      "field": "projectName",
      "fieldName": "项目名称",
      "fieldType": 1,
      "sort": 2
    },
    {
      "id": "1764555672267456514",
      "field": "incomeExpensIllustrate",
      "fieldName": "收支说明",
      "fieldType": 1,
      "sort": 3
    },
    {
      "id": "1764555922562547714",
      "field": "incomeExpensDirection",
      "fieldName": "收支方向",
      "fieldType": 1,
      "sort": 4
    },
    {
      "id": "1764556145296867330",
      "field": "amount",
      "fieldName": "金额",
      "fieldType": 1,
      "sort": 5
    },
    {
      "id": "1764555613891133441",
      "field": "date",
      "fieldName": "日期",
      "fieldType": 1,
      "sort": 6
    },
    {
      "id": "1764556195016146946",
      "field": "projectNo",
      "fieldName": "项目编号",
      "fieldType": 0,
      "sort": 7
    },
    {
      "id": "1764554557526310913",
      "field": "projectBatch",
      "fieldName": "批次",
      "fieldType": 1,
      "sort": 8
    },
    {
      "id": "1764555970386001921",
      "field": "abstracts",
      "fieldName": "其他信息",
      "fieldType": 1,
      "sort": 9
    },
    {
      "id": "1764556083028230146",
      "field": "secondMotion",
      "fieldName": "附议信息",
      "fieldType": 0,
      "sort": 10
    },
    {
      "id": "1764556195016146945",
      "field": "operator",
      "fieldName": "操作人",
      "fieldType": 0,
      "sort": 11
    }
  ],
  "result": 0,
  "total": "0"
})
const metaTableData = ref([])
// 列表数据
const selectionList = ref([])
const getList = () => {
      metaTableData.value = dates.data
      metaTableData.value.forEach(row=>{
        // fieldType 选中标识 0-未选中 1-选中
        if (row.fieldType == 1) {
          selectionList.value.push(row)
          nextTick(()=>{
            tableRef.value.clearSelection
            tableRef.value.toggleRowSelection(row, true)  // true为选中
          })
        }
        row.fieldType = 0
      })
}
getList()
// 多选
const handleSelectionChange = (val) => {
  debugger
  selectionList.value = val;
}
// 禁用选项
const okLists = ref(['1764553423457812482','1764554505948954626','1764555613891133441','1764555922562547714','1764556145296867330','1764555672267456514'])
const isRow=(row:any,rowIndex:any)=>{
  return !okLists.value.includes(row.id)
}
// 提交
const sureSubmit = () => {
}
</script>
<style lang="scss" scoped>
.content {
  margin-top: 20px;
  margin-right: 20px;
  width: 100%;
  .set-box {
    margin: 20px 0;
    width: 60%;
    padding-left: 16px;
  }
  .el-button {
    float: right;
    margin-bottom: 10px;
  }
  .el-table {
    margin: 20px 0;
  }
}
</style>
